<template>
  <div class="container">
    <mt-header title="个人信息设置">
      <router-link :to="{name: 'mine'}" slot="left">
        <mt-button icon="back">返回</mt-button>
      </router-link>
      <mt-button slot="right" @click.native="handleSaveProfile">保存</mt-button>
    </mt-header>
    <div class="profile">
      <mt-field label="姓名" placeholder="请输入姓名" v-model="accountInfo.displayName"></mt-field>
      <mt-field label="用户名" placeholder="请输入用户名" v-model="accountInfo.userName"></mt-field>
      <mt-field label="手机号" type="tel" placeholder="请输入手机号" attr="{maxlength: 11}" v-model="accountInfo.cellPhone"></mt-field>
      <mt-field label="座机" placeholder="请输入座机号" v-model="accountInfo.telphone"></mt-field>
      <mt-field label="邮箱" type="email" placeholder="请输入邮箱地址" v-model="accountInfo.email"></mt-field>
    </div>
  </div>
</template>
<script>
  import fetch from '../../utils/fetch'
  import { Toast } from 'mint-ui';
  export default{
    data () {
      return{
        accountInfo: ''
      }
    },
    methods:{
      handleGetAccountInfo (){
        fetch('/api/account/info').then(response =>{
          if (response.data.success) {
            this.accountInfo = response.data.obj
          }
        })
      },
      handleSaveProfile(){
        Toast({
          message: '操作成功',
          iconClass: 'mintui mintui-success'
        });
      }
    },
    created () {
      this.handleGetAccountInfo()
    }
  }
</script>
<style scoped lang="scss">
  @import '../../base/css/base.scss';
  .container{
    background: #F0EFF5;
    height: inherit;
    .profile{
      margin: 20px 0;
    }
  }
</style>
